<!-- 购物车页面 -->
<template>
  <div class="goodsCar">
    <RollbackBarView :to="'/'" :title="'购物车'" />
    <!-- 用户未登录 -->
    <div class="not-login" v-if="code == 400">
      <img src="@/assets/images/nullCar.png" alt="" />
      <p>登录后可同步购物车中的商品</p>
    </div>
    <!-- 用户购物车为空 -->
    <div class="not-login" v-if="code == 202">
      <img src="@/assets/images/nullCar.png" alt="" />
      <p>你还没有添加商品哦</p>
    </div>
    <!-- 用户购物车数据 -->
    <div class="goods-list-box" v-else>
      <div class="goods-list">
        <div
          class="list-item"
          v-for="(item, index) in goodsList"
          :key="item.id"
        >
          <div class="check-box">
            <van-checkbox
              v-model="item.check"
              checked-color="#ee0a24"
              @click="cutCheck(item.check, index, item)"
            ></van-checkbox>
          </div>
          <router-link
            tag="div"
            :to="`/goodsdetail/${item.id}`"
            class="item-img"
          >
            <img :src="item.img" alt="" />
          </router-link>
          <div class="item-main">
            <router-link
              tag="div"
              :to="`/goodsdetail/${item.id}`"
              class="title"
              >{{ item.title }}</router-link
            >
            <div class="price">
              <span>{{ item.price }}</span> 元
            </div>
            <div class="addcount">
              <van-stepper
                v-model="item.count"
                @plus="addCount(item)"
                @minus="redCount(item)"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
        </div>
      </div>

      <div class="fun-bar">
        <div class="check">
          <van-checkbox v-model="check" @click="allcut" checked-color="#ee0a24"
            >全选</van-checkbox
          >
        </div>
        <div class="bar-right">
          <div class="count">已选{{ count }}件</div>
          <div class="price">
            合计:<span
              >￥<em>{{ price }}</em></span
            >
          </div>
          <div class="btn" @click="empty()">确认购买</div>
        </div>
      </div>
    </div>
    <BtmNavView />
  </div>
</template>

<script>
import BtmNavView from "@/components/BtmNavView.vue";
import RollbackBarView from "@/components/RollbackBarView.vue";
import { getGoodsList } from "@/api/inedx";
export default {
  data() {
    return {
      goodsList: [],
      userId: "",
      code: 0,
      check: false,
      checkgoods: [],
      count: 0,
      price: 0,
      clickCount: 0,
      priceList: [],
    };
  },
  methods: {
    // 获取用户购物车商品列表
    async getGoodCarsList() {
      let { data } = await this.$http(getGoodsList(this.userId));
      this.code = data.code;
      this.goodsList = data.data;
      if (this.goodsList == "") {
        this.code = 202;
      }
      this.total();
    },
    // 复选框点击事件
    cutCheck(check, index) {
      if (check) {
        this.clickCount++;
        this.total();
      } else {
        this.total();
        this.clickCount--;
      }
      // 判断当前选中的数量跟商品总数量是否相等
      if (this.clickCount === this.goodsList.length) {
        this.check = true;
      } else {
        this.check = false;
      }
      this.goodsList[index].check = check;
    },
    // 全选框点击事件
    allcut() {
      if (this.code == 200) {
        if (this.check) {
          this.goodsList.map((item) => {
            item.check = true;
            this.total();
          });
        } else {
          this.goodsList.map((item) => {
            item.check = false;
            this.total();
          });
        }
      }
    },
    // 增加按钮点击事件
    addCount(all) {
      all.count = all.count + 1;
      all.totalprice = all.count * all.price;
      this.total();
    },
    // 减少按钮点击事件
    redCount(all) {
      all.count = all.count - 1;
      all.totalprice = all.count * all.price;
      this.total();
    },
    // 计算商品总价和总量
    total() {
      let totalList = [];
      let countList = [];

      if (this.code == 200) {
        this.goodsList.map((item) => {
          if (item.check) {
            totalList.push(item.totalprice);
            countList.push(item.count);
          }
        });
      }
      if (totalList != "") {
        this.price = eval(totalList.join("+"));
        this.count = eval(countList.join("+"));
      } else {
        this.price = 0;
        this.count = 0;
      }
    },
    // 结算
    empty() {
      let newList = [];
      if (this.code == 200) {
        this.goodsList.map((item) => {
          if (!item.check) {
            newList.push(item);
          }
        });
        if (newList.length == this.goodsList.length) {
          this.$toast("你还没有选择商品哦");
        } else {
          this.goodsList = newList;
          this.$toast.success("购买成功");
          this.total();
          this.$http.post("http://192.168.27.59/update", {
            id: this.userId,
            list: JSON.stringify(newList),
          });
          if (this.goodsList.length == 0) {
            this.code = 202;
          }
        }
      } else {
        this.$toast("请登录后再进行操作");
      }
    },
    // 离开页面更新购物车数据
    putGoodsList() {
      this.$http.post("http://192.168.27.59/update", {
        id: this.userId,
        list: JSON.stringify(this.goodsList),
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    this.putGoodsList();
    next();
  },
  // 获取登录用户信息
  created() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if (userInfo) {
      this.userId = userInfo.userId;
    }
  },
  mounted() {
    this.getGoodCarsList();
  },
  components: { BtmNavView, RollbackBarView },
};
</script>

<style lang="scss" scoped>
.goodsCar {
  min-height: 100vh;
  overflow-x: hidden;
  .not-login {
    width: 100vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20vh;
    text-align: center;
    color: #333;
    img {
      width: 40vw;
    }
    p {
      margin-top: 1.25rem;
    }
  }

  .goods-list-box {
    .goods-list {
      width: 100vw;
      max-height: 77vh;
      overflow-y: scroll;
      .list-item {
        width: 100vw;
        padding: 0.9375rem 0.625rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: #fff;
        margin-bottom: 3vmin;
        .item-img {
          margin: 0 5vmin;
          img {
            width: 28vw;
          }
        }
        .item-main {
          width: 50vw;
          font-size: 14px;
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 18px;
          }
          .price {
            margin: 0.375rem 0;
            span {
              font-size: 18px;
              color: red;
            }
          }
        }
      }
    }
  }

  .fun-bar {
    position: fixed;
    bottom: 49px;
    left: 0;
    background-color: #fff;
    z-index: 1;
    border-top: 0.5px solid rgba(169, 169, 169, 0.2);
    display: flex;
    justify-content: space-between;
    width: 100vw;
    color: #666;
    font-size: 14px;
    padding: 0.625rem;
    box-sizing: border-box;
    .check {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    .bar-right {
      display: flex;
      align-items: center;
      .price {
        display: flex;
        align-items: center;
        margin: 0 0.625rem;
        span {
          font-size: 12px;
        }
        em {
          font-size: 18px;
          color: red;
        }
      }
      .btn {
        width: 25vw;
        height: 12vmin;
        background-color: rgba(228, 7, 7, 0.801);
        border-radius: 2.5rem;
        text-align: center;
        line-height: 12vmin;
        color: #fff;
      }
    }
  }
}
</style>
